<template>
    <Modal
        v-model="modal2"
        width="660"
        title="用户信息"
        @on-ok="handleSubmit('formValidate')"
        :closable="false"
    >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="用户名" prop="userName">
                <i-input v-model="formValidate.userName" placeholder="请输入你的用户名"></i-input>
            </FormItem>
            <FormItem label="密码" prop="password" :rules="passValid">
                <i-input v-model="formValidate.password" placeholder="请输入你的密码"></i-input>
            </FormItem>
            <FormItem label="邮箱" prop="email">
                <i-input v-model="formValidate.email" placeholder="请输入你的邮箱"></i-input>
            </FormItem>
            <FormItem label="手机号码" prop="mobile">
                <i-input v-model="formValidate.mobile" placeholder="请输入你的手机号码"></i-input>
            </FormItem>
            <FormItem label="角色" prop="role">
                <Select v-model="formValidate.role" placeholder="选择你的角色">
                    <i-option
                        v-for="role in roleList"
                        :key="role.roleId"
                        :label="role.roleId"
                    >{{ role.roleName }}</i-option>
                </Select>
            </FormItem>
            <FormItem label="状态" prop="status">
                <RadioGroup v-model="formValidate.status">
                    <Radio :label="1">正常</Radio>
                    <Radio :label="0">失效</Radio>
                </RadioGroup>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
export default {
    data() {
        return {
            modal2: true,
            roleList: [],
            formValidate: {
                id: 0,
                userName: "",
                password: "",
                // comfirmPassword: "",
                // salt: "",
                email: "",
                mobile: "",
                roleIdList: [],
                status: 1
            },
            passValid: {},
            ruleValidate: {
                userName: [
                    {
                        required: true,
                        message: "必须填写账号",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        required: true,
                        message: "必须填写邮箱",
                        trigger: "blur"
                    },
                    {
                        type: "email",
                        message: "邮箱格式有错",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        init(id) {
            this.formValidate.id = id || 0;
            this.modal2 = true;
            this.passValid = {
                required: this.formValidate.id <= 0,
                message: "必须填写密码",
                trigger: "blur"
            };
            this.$http({
                url: "/sys/role/select",
                method: "get",
                params: this.$http.adornParams()
            })
                .then(({ data }) => {
                    this.roleList = data && data.code === 0 ? data.list : [];
                })
                .then(() => {
                    this.visible = true;
                    this.$nextTick(() => {
                        this.$refs["formValidate"].resetFields();
                    });
                })
                .then(() => {
                    if (this.formValidate.id) {
                        this.$http({
                            url: `/sys/user/info/${this.formValidate.id}`,
                            method: "get",
                            params: this.$http.adornParams()
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.formValidate.userName = data.user.username;
                                this.formValidate.salt = data.user.salt;
                                this.formValidate.email = data.user.email;
                                this.formValidate.mobile = data.user.mobile;
                                this.formValidate.roleIdList =
                                    data.user.roleIdList;
                                this.formValidate.status = data.user.status;
                            }
                        });
                    }
                });
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                console.log(this.formValidate);
                if (valid) {
                    this.$http({
                        url: `/sys/user/${
                            !this.formValidate.id ? "save" : "update"
                        }`,
                        method: "post",
                        data: this.$http.adornData({
                            userId: this.formValidate.id || undefined,
                            username: this.formValidate.userName,
                            password: this.formValidate.password,
                            salt: this.formValidate.salt,
                            email: this.formValidate.email,
                            mobile: this.formValidate.mobile,
                            status: this.formValidate.status,
                            roleIdList: this.formValidate.roleIdList
                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$Message.success({
                                content: "成功！",
                                onClose: () => {
                                    this.$emit("refreshDataList");
                                }
                            });

                            // this.$message({
                            //     message: "操作成功",
                            //     type: "success",
                            //     duration: 1500,
                            //     onClose: () => {
                            //         this.visible = false;
                            //         this.$emit("refreshDataList");
                            //     }
                            // });
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                } else {
                    this.$Message.error("数据填写不全！");
                    this.$nextTick(() => {
                        this.modal2 = true;
                    });
                    // setTimeout(() => {
                    //     this.modal2 = true;
                    // }, 1000);
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        del() {
            this.modal_loading = true;
            setTimeout(() => {
                this.modal_loading = false;
                // this.modal2 = false;
                this.$Message.success("Successfully delete");
            }, 2000);
        }
    }
};
</script>